/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-03-27 19:41:25
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-04-12 19:44:24
 */
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
module.exports = {
  plugins: [
    //试图修复flexbug的所有问题
    require("postcss-flexbugs-fixes"),
    autoprefixer({
      //自动在样式中添加浏览器厂商前缀,避免手动处理样式兼容问题
      overrideBrowserslist: ["iOS >= 7", "Android >= 4.1"],
      // flexbox: 'no-2009',  加了低版本就没有 display: -webkit-box; 兼容写法
      // grid: true,
    }),
    pxtorem({
      rootValue: 100, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 5, //保留rem小数点多少位
      //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      // minPixelValue: 12, //px小于12的不会被转换
      //  propWhiteList: []
    }),
  ],
};
